<script setup lang="ts">
  import { postLoginAPI, updatePsw, postLogoutAPI } from '@/services/login'
  import { useMemberStore } from '@/stores'
  import { onLoad } from '@dcloudio/uni-app'
  import { ref } from 'vue'

  //自定义样式
  const styles = "{ color: '#333',backgroundColor: rgba(179, 220, 246, 0.10),disableColor: '#F7F6F6',borderColor: '#e5e5e5',height:100rpx}"
  const loading = ref(false)
  const memberStore = useMemberStore()
  const userinfo : any = memberStore.getUserInfo()

  onLoad(async () => { })

  const form = ref({
    rawPassword:'',
    newPassword:'',
    password:''
  })

  function forgetPassword() {
    uni.navigateTo({
      url: '/pages/login/forgetpassword',
    })
  }

  // 取消
  const cancel = () => {
    uni.navigateTo({
      url:'/pagesMember/settings/settings'
    })
  }

  // 确定
  const confirm = () => {
    loading.value = true
    const params = {
      userCode: userinfo.userCode,
      oldPassword: form.value.rawPassword,
      newPassword: form.value.newPassword,
      password: form.value.password
    }
    updatePsw(params).then((res : any) => {
      loading.value = false
      uni.showToast({ icon: 'success', title: '密码修改成功' })
      // 退出接口
      postLogoutAPI()
      // 清理用户信息
      memberStore.clearProfile()
      // 页面跳转
      uni.reLaunch({ url: '/pages/login/login' })
    }).catch(e => {
      loading.value = false
    })
  }
</script>

<template>
  <view class="viewport">
    <!-- <image class="bak-box" src="../../static/login/login_image.png" mode="aspectFill" /> -->
    <view class="login-form">
      <!-- <view class="form-title">修改密码</view> -->

      <view class="input-group">
        <uni-easyinput
          v-model="form.rawPassword"
          class="input-item"
          type="password"
          placeholder="请输入原密码"
          placeholder-style="color: #888;font-size: 15px"
          :inputBorder="false"
          :focus="true"
        />
        <view class="divider" />

        <uni-easyinput
          v-model="form.newPassword"
          class="input-item"
          type="password"
          placeholder="请输入新密码"
          placeholder-style="color: #888;font-size: 15px"
          :inputBorder="false"
        />
        <view class="divider" />

        <uni-easyinput
          v-model="form.password"
          class="input-item"
         :styles="styles"
          type="password"
          placeholder="请再次输入新密码"
          placeholder-style="color: #888;font-size: 15px"
          :inputBorder="false"
        />
        <view class="divider" />
      </view>

      <view class="button-group">
        <button class="button cancel" @click="cancel">取消</button>
        <button class="button confirm" :loading="loading" @click="confirm">确认</button>
      </view>
    </view>
  </view>
</template>

<style lang="scss">


.viewport {
  height: 100%;
  position: relative;

  .bak-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40%;
    z-index: 0;
  }
}

.login-form {
  position: relative;
  z-index: 1;
  margin: 30% 0rpx 0;
  padding: 40rpx;
  background-color: #fff;

  .form-title {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
    text-align: center;
    margin-bottom: 40rpx;
  }
}

.input-group {
  margin-bottom: 60rpx;

  .input-item {
    padding: 30rpx 0;
    font-size: 28rpx;
    color: #333;

    &:focus {
      color: #54B9CC;
    }
  }

  .divider {
    height: 1rpx;
    background-color: #e5e6eb;
    margin: 15rpx 4rpx;
  }
}

.button-group {
  display: flex;
  justify-content: space-between;
  margin-top: 100rpx;

  .button {
    flex: 1;
    height: 88rpx;
    font-size: 32rpx;
    margin: 0 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;

    &.cancel {
      background-color: #f5f5f5;
      color: #666;

      &:active {
        background-color: #e5e5e5;
      }
    }

    &.confirm {
      background-color: #54B9CC;
      color: #fff;

      &:active {
        background-color: darken(#54B9CC, 8%);
      }

      &[loading] {
        opacity: 0.8;
      }
    }
  }
}
</style>
